<template>
  <IFexHeaderMain>
    <!-- 头部区域 -->
    <template #header>
      <IHeader :bankUrl="bankUrl" :key="Math.random()">设备管理</IHeader>
      <!-- <DropDown :dropDownDataList="dropDownDataList" @change="handleSearch"></DropDown> -->
    </template>
    <view class="page-container wh_auto por">
      <DataCard :data="item" :key="index" v-for="(item, index) in dataList" />
      <view class="wrapper whov" v-if="dataList.length === 0">
        <view class="empty-state"> 暂无数据 </view>
      </view>
    </view>
    <template #footer><ITabBarManager :index="-1" /></template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
  import { ref, nextTick, onMounted, computed } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import IHeader from '@/components/container/IHeader.vue'
  import ITabBarManager from '@/components/container/ITabBarManager.vue'
  import DropDown from '@/components/container/DropDown.vue'
  import DataCard from './DataCard.vue'
  import { getDeviceCounterDetails } from '@/api/zmanager/device'
  import useUserInfoStore from '@/store/userInfo'
  import { onLoad } from '@dcloudio/uni-app'
  import useToastMsg from '@/hooks/sysMsg'
  const toastMsg = useToastMsg()
  const userInfoStore = useUserInfoStore()
  const bankUrl = computed(() => (userInfoStore.getPlatformType == 'gld' ? '/pages/zmanager/index/index' : '/pages/invest/index/index'))
  const dropDownDataList = ref([
    {
      show: false,
      label: '测试',
      field: 'cs1',
      model: null,
      selectedIndex: -1,
      dataList: [{ label: '123123' }],
    },
    {
      show: false,
      label: '测试',
      field: 'cs2',
      model: null,
      selectedIndex: -1,
      dataList: [{ label: '123123' }],
    },
    {
      show: false,
      label: '测试',
      field: 'cs3',
      model: null,
      selectedIndex: -1,
      dataList: [
        { label: '123123', value: '11111' },
        { label: '123123', value: '111111' },
        { label: '123123', value: '1111111' },
        { label: '123123', value: '111221' },
        { label: '123123', value: '111331' },
      ],
    },
  ])
  const dataList = ref<any[]>([])
  const searchParam = ref({ id: '' })
  const handleSearch = (e: any) => {
  }
  onLoad((options: any) => {
    searchParam.value.id = options.id || ''
  })
  onMounted(() => nextTick(() => init()))
  const init = async () => {
    toastMsg.showLoading()
    const result = await getDeviceCounterDetails(userInfoStore.getUserInfo.userId, searchParam.value.id)
    if (result) {
      dataList.value = result.data
    }
    toastMsg.hideLoading()
  }
</script>

<style scoped lang="scss">
  .page-container {
    padding: 10rpx 0;
    background: #f5f5f5;
  }
</style>
